import React, { useEffect, useState } from "react";
import style from "./style.module.scss";
import { login } from "../../features/user/userApi";
import { useAppDispatch, useAppSelector } from "../../store/hooks";
import emailIcon from "../../assets/images/icon/hdpi/login_icon_mail_n.png";
import lockIcon from "../../assets/images/icon/hdpi/login_icon_lock_n.png";
import hideIcon from "../../assets/images/icon/hdpi/login_icon_hide_password_n.png";
import { useNavigate, useSearchParams } from "react-router-dom";
import showIcon from "../../assets/images/icon/hdpi/login_icon_show_password.png";
import { MyResponseType } from "../../types";
import { Notify } from "react-vant";
import loginBg from "../../assets/images/image/hdpi/login_bg_doctor.png";

// 登录的参数类型
interface loginRawState {
  email: string;
  pwd: string;
}

const Index: React.FC = () => {
  //  判断用户是否登录依据
  const isLogin = useAppSelector((state) => state.user.isLogin);
  const [pwdIcon, setPwdIcon] = useState<string>(hideIcon);
  const [show, setShow] = useState<boolean>(false);
  const [type, setType] = useState<string>("password");
  const navigate = useNavigate();
  //  存放用户的邮箱和密码数据
  const [values, setValues] = useState<loginRawState>({
    email: "906446244@qq.com",
    pwd: "123456",
  });

  const [searchParams] = useSearchParams();
  const from = searchParams.get("from");
  const dispatch = useAppDispatch();
  const onLogin = (values: loginRawState) => {
    dispatch(login({ ...values })).then((action) => {
      const { status, message } = action.payload as MyResponseType;
      if (status === "0000") {
        Notify.show({ type: "primary", message });
        navigate("/");
      } else {
        Notify.show({ type: "danger", message });
      }
    });
  };

  const changeType = () => {
    if (!show) {
      setType("text");
      setPwdIcon(showIcon);
      setShow(true);
    } else {
      setType("password");
      setPwdIcon(hideIcon);
      setShow(false);
    }
  };

  const onkeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.keyCode === 13) {
      onLogin(values);
    }
  };

  useEffect(() => {
    if (isLogin) {
      if (from) {
        navigate(from);
      } else {
        navigate("/");
      }
    }
  }, [isLogin]);
return (
    <div className={style.login}>
      <div className={style.head_img_wrapper}>
        <img src={loginBg} alt="" className={style.head_img} />
      </div>
      <div className="container">
        <form className={style.content}>
          <div className={style.formItem_email}>
            <img src={emailIcon} alt="" className={style.emailIcon} />
            <input
              type="text"
              className={style.emailInp}
              placeholder="请输入邮箱"
              name="email"
              value={values.email}
              onChange={(e) =>
                setValues((values) => ({ ...values, email: e.target.value }))
              }
            />
          </div>
          <div className={style.formItem_password}>
            <img src={lockIcon} alt="" className={style.lockIcon} />
            <input
              type={type}
              className={style.pwdInp}
              placeholder="请输入密码"
              name="pwd"
              value={values.pwd}
              onChange={(e) =>
                setValues((values) => ({ ...values, pwd: e.target.value }))
              }
              onKeyDown={(e) => onkeydown(e)}
            />
            <img
              src={pwdIcon}
              alt=""
              className={style.hideIcon}
              onClick={() => changeType()}
            />
          </div>
        </form>
        <div className={style.btn_link}>
          <span
            className={style.forgetPwd}
            onClick={() => navigate("/forgetPassword")}
          >
            忘记密码
          </span>
          <span
            className={style.registerNow}
            onClick={() => navigate("/register")}
          >
            申请入驻
          </span>
        </div>
        <button
          type="button"
          className={style.btn_login}
          onClick={() => onLogin(values)}
        >
          登录
        </button>
      </div>
    </div>
  );
};

export default Index;
